@import "./com";

header {
    .h_top {
        width: vw(750);
        height: vw(150);

        display: flex;
        justify-content: space-around;
        align-items: center;
        > img {
            width: vw(125);
        }

        > .inp {
            position: relative;
            width: vw(270);
            height: vw(53);
            border: vw(1) solid $col;
            border-radius: vw(26);

            // 搜索框

            &::after {
                content: "";
                position: absolute;
                right: vw(16);
                top: vw(10);
                width: vw(36);
                height: vw(34);
                background: url("../png/index/搜索矩.png") no-repeat TOP/cover;
            }
            > input {
                width: vw(183);
                height: vw(30);
                font-size: vw(24);
                margin-top: vw(10);
                margin-left: vw(27);
                border: none;
                outline: none;
            }
        }
        // 地区

        .sel {
            position: relative;

            > select {
                border: vw(1) solid $col;
                width: vw(160);
                height: vw(60);

                // 去除三角
                -webkit-appearance: none;
                appearance: none;
                font-size: vw(26);
                text-indent: vw(17);
            }
            li {
                content: "";
                position: absolute;
                right: vw(15);
                top: vw(23);
                border-top: vw(50);
                width: 0;
                height: 0;
                border: vw(15) solid transparent;
                border-top: vw(20) solid $col;
                pointer-events: none;
            }
        }
    }

    // 轮播图
    .h_bt {
        width: vw(750);
        overflow: auto;
        > ul {
            width: vw(750 * 3);
            font-size: 0;
            > li  {
                display: inline-block;
                word-spacing: none;
                width: vw(750);
                > img {
                    width: 100%;
                }
            }
        }

        // 进度条
        .bar {
            position: absolute;
            top: vw(330);
            width: 100%;
            height: vw(10);
            background-color: rgba(0, 0, 0, 0.5);
            > div {
                position: absolute;
                left: vw(150);
                width: vw(130);
                height: vw(10);
                background-color: rgba(225, 225, 225, 0.7);
            }
        }
    }
}
main {
    width: vw(750);
    height: 100%;
    // background-color: black;
    position: relative;
}

// 主要内容
.groupbuying {
    margin: 0 2vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: vw(93);

    ul > img {
        width: vw(57);
        height: vw(57);
        margin: 0 0 -7px 0;
    }

    div img {
        width: vw(27);
        height: vw(25);
        margin: 0 0 vw(-4) 0;
    }
    div span {
        font-size: vw(24);
    }
}

.pag {
    width: vw(200);
    height: vw(240);
    display: flex;
    align-items: center;

    > ul {
        margin: 6vh;
    }

    ul img {
        margin: vw(10) 0;
        width: vw(220);
        height: vw(100);
    }
}

.bt {
    // overflow: auto;
    flex-wrap: wrap;
    display: flex;
    width: vw(750);

    img {
        margin: vw(10);
        width: vw(200);
        height: vw(165);
    }
}
.box {
    margin-bottom: vw(26);
    justify-content: space-around;
    display: flex;
    width: vw(750);
    height: vw(165);
   

    > .box1 {
        font-size: 0;
        margin-top: vw(10);
        width: vw(485);
         
        
        // display: inline-block;
       
        // word-spacing: none;
        // display: inline-block;
        // word-spacing: none;
       
        div > p {
            margin-top: vw(10);
            font-size: vw(22);
        }

        > .tp {
            margin-top: vw(10);
            display: flex;
            justify-content: space-between;

            > h3 {
                color: $col;
                font-weight: 500;
                font-size: vw(35);
            }

            > h4 {
                font-size: vw(30);
                font-weight: 500;
            }
            span {
                font-size: vw(22);
            }
        }
    }
}

//  尾部
nav {
    > ul {
        position: fixed;
        bottom: 0;
        background-color: #fff;
        width: vw(750);
        height: vw(110);
        display: flex;
        justify-content: space-around;

        > li {
            width: vw(70);
            height: vw(106);

            > a {
                > img {
                    width: vw(70);
                    height: vw(70);
                }
            }
            > p {
                text-align: center;
                font-size: vw(24);
            }
        }
    }
}
